<!DOCTYPE html>
<html class="x-admin-sm">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        
        <link rel="stylesheet" href="./css/font.css">
        <link rel="stylesheet" href="./css/xadmin.css">
        <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
	
		<script src="js/axios.min.js"></script>
		<script src="js/vue.min.js"></script>
        <script src="./lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="./js/xadmin.js"></script>
      
    <style>
        #container {
            height: 500px;
            width: 100%;
        }

        .amap-icon img{
            width: 25px;
            height: 34px;
        }
    </style>
        
    </head>
    <body>
        <div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a>
              <cite>监控中心</cite></a>
          </span>
          <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
            <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
        </div>
        
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                    
                     <div id="container">
	  					
    				 </div>
          
                    </div>
                </div>
            </div>
        </div> 
    </body>
	<script src="js/jquery.min.js"></script>
    <script src="https://cache.amap.com/lbs/static/es5.min.js"></script>
	<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
	<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
	<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=2ebe4441907aa4c43cc1b2e63038c9ec&plugin=AMap.Driving&&plugin=AMap.Scale,AMap.OverView,AMap.ToolBar"></script>
    <script>
    
  //基本地图加载
	 var marker,map = new AMap.Map("container", {
	 	resizeEnable: true,
	    zoomToAccuracy: true,
		zoom: 14,
		center: [111.31677,23.49681], //初始地图中心点
	 });
	 
	 var toolBar = new AMap.ToolBar({
		    visible: false
		 });
	     
	 map.clearMap();  // 清除地图覆盖物
	
	 var newCenter = map.setFitView();
	
	 var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
    
	 /* 进入首页事件 */
	 window.onload=function(){
		getallwa();
	 }
	   
	   function getallwa(){
			 
		 var url = "http://129.204.188.236:8080/qiangdan/get_allwa";
		 
		 axios
		 .get(url)
		 .then(function(response) {
		 	console.log(response.data);
			if(response.data == null){
				alert("当前无在线工作者");
			}else{
		 	 var jsonArray=eval(response.data);
		 	 for(var i = 0; i <= jsonArray.length; i++ ){
			       console.log(response.data[i]);
			       console.log(response.data[i].phonenum);
			       
			       marker = new AMap.Marker({
			 			 icon:  'images/tx.png',
			 			 position: [response.data[i].longitude,response.data[i].latitude],
			 			 offset: new AMap.Pixel(-13, -30)
			 		 });
		 		  marker.setMap(map);
	 	          marker.content = '工作者姓名：'+response.data[i].name+ '<br>' + '联系方式：'+response.data[i].phonenum ;
	 	          marker.on('click', markerClick);
	 	          //marker.emit('click', {target: marker});
		     }
			 }
		 })
		 .catch(function(error){
		 	console.log(error);
		 });
	}
    
    function markerClick(e) {
        infoWindow.setContent(e.target.content);
        infoWindow.open(map, e.target.getPosition());
    }
    
    </script>
</html>